<template>
  <view class="doctor-nav">
    <view class="selectAll" :class="{ changeColor: currentIndex == -1 }"
      @click="selectAll"
      >全部</view
    >
    <view scroll-x="true" class="scroll_H">
      <view
        v-for="(item, index) in time_List"
        :key="index"
        class="Week"
        @click="changeTime(index, item.dep_id, item.date)"
      >
        <text>{{ item.date }}</text>
        <text :class="{ changeColor: currentIndex == index }">{{
          item.week
        }}</text>
        <text>{{ item.nu_source ? "有号" : "无号" }}</text>
      </view>
    </view>
  </view>
  <view style="height: 150rpx"></view>
  <view
    class="doctor-list"
    v-for="(item, index) in doctor_list"
    :key="index"
    @click="toDoctorDet(item._id)"
  >
    <image :src="item.avatar" mode="aspectFill"></image>
    <view class="doctor-name">
      <text>{{ item.name }}</text>
      <text>{{ item.post }}</text>
      <text>{{ item.good_at }}</text>
    </view>
    <view class="about-doctor">预约</view>
  </view>
  <!-- 提示组件 -->
  <point :show="doctor_list.length == 0 ? true : false" :title="title"></point>
  <!-- 骨架屏 -->
  <skIndex v-if="skeLeton"></skIndex>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import point from "~/components/point/point";
import apiRequest from "~/api/index";

let title = ref("当日没有医生排班");
let id = ref();
let time_List = ref([]); // 时间列表
let doctor_list = ref([]); // 医生列表
// 当前索引值
let currentIndex = ref(-1);
// 骨架屏
let skeLeton = ref(true);
onLoad(async (e) => {
  id.value = e.id;
  const res = await Promise.all([
    apiRequest.TimeSele({ dep_id: id.value }),
    apiRequest.AlldList({ dep_id: id.value }),
  ]);
  time_List.value = res[0].data;
  doctor_list.value = res[1].data;
  skeLeton.value = false;
});

async function selectAll() {
  currentIndex.value = -1;
  const res = await apiRequest.AlldList({ dep_id: id.value });
  doctor_list.value = res.data;
}

async function changeTime(index, dep_id, week) {
  // 筛选挂号医生
  currentIndex.value = index;
  const res = await apiRequest.EverydList({ dep_id, week });
  doctor_list.value = res.data;
}
function toDoctorDet(id) {
  uni.navigateTo({
    url: "/pages/doctor/doctor-detail?id=" + id,
  });
}
</script>

<style lang="scss" scoped>
.doctor-nav {
  margin-top: 3rpx;
  height: 150rpx;
  @apply bg-light-50 fixed top-0 left-0 right-0 flex;
  .selectAll {
    flex-shrink: 0;
    border-right: 3rpx solid #f2f2f2;
    width: 150rpx;
    text-align: center;
    line-height: 150rpx;
  }
  .scroll_H {
    overflow: auto;
    white-space: nowrap;
    &::-webkit-scrollbar {
      display: none;
    }
    .Week {
      display: inline-block;
      width: 150rpx;
      line-height: 50rpx;
      text {
        text-align: center;
        display: block;
      }
    }
  }
}
/* 选中时间加上颜色 */
.changeColor {
  color: #0176ff;
}
// 列表
.doctor-list {
  background-color: #ffffff;
  padding: 40rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #d3d3d8;
  &:last-child {
    border: none !important;
  }
  image {
    width: 150rpx;
    height: 150rpx;
    display: block;
    border-radius: 50%;
  }
  text {
    display: block;
    padding: 5rpx 0;
    color: #b1b2b3;
  }
  .doctor-name {
    flex: 1;
    padding: 0 10rpx;
    text:nth-child(1) {
      font-size: 35rpx;
      font-weight: bold;
      color: #333 !important;
    }
    text:nth-child(3) {
      display: -webkit-box;
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  }
  .about-doctor {
    padding: 8rpx 30rpx;
    border-radius: 30rpx;
    border: 1rpx solid #0176ff;
    color: #0176ff;
  }
}
</style>
